<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>房屋管理</a>
    <a><cite>租客档案</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-inline layui-show-xs-block">
            <select name="property" lay-filter="select">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
          <div class="layui-inline layui-show-xs-block">
            <select name="house_number_id" id="house_number_id" autocomplete="off">
              <option value="">请选择房号</option>
              {foreach $number as $v}
              <option value="{$v.id}">{$v.name}</option>
              {/foreach}
            </select>
          </div>
          <div class=" layui-inline layui-show-xs-block">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
          </div>
        </form>
        <table class="layui-table" id="dataGrid" lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="toolbarDemo">
  <div class = "layui-btn-container" > 
    <button class = "layui-btn layui-btn-sm" lay-event="add">
      <i class="layui-icon"></i>新增</button>
  </div > 
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script type="text/html" id="sexTpl">
  {{# if(d.sex == 'F'){ }}
    女
  {{# } else if(d.sex == 'M') { }}
    男
  {{# } else { }}
  {{# }}}
</script>

<script>
  layui.use(['table', 'form', 'laydate'], function () {
    var table = layui.table
      , laydate = layui.laydate
      , form = layui.form;

    // 首次加载
    table.render({
      elem: '#dataGrid'
      , height: 'full'
      , url: './query.html' //数据接口
      , toolbar: '#toolbarDemo'
      , defaultToolbar: ['filter']
      , page: true //开启分页
      , cols: [[ //表头
        { field: 'property_name', title: '房产', minWidth: 110 }
        , { field: 'number_name', title: '房号' }
        , { field: 'name', title: '姓名' }
        , { field: 'sex', title: '性别', templet: '#sexTpl', unresize: true, hide: true }
        , { field: 'age', title: '年龄', hide: true }
        , { field: 'id_card_number', title: '身份证号码', hide: true }
        , { field: 'native_place', title: '户口所在地', hide: true }
        , { field: 'work_units', title: '现工作单位', hide: true }
        , { field: 'phone', title: '联系电话' }
        , { field: 'checkin_time', title: '入住时间', minWidth: 110 }
        , { field: 'leave_time', title: '离开时间', minWidth: 110 }
        , { field: 'right', title: '操作', toolbar: '#barDemo', minWidth: 165 }
      ]]
    });

    form.on('submit(sreach)', function (data) {
      var data = data.field;
      table.reload('dataGrid', {
        url: './query.html'
        , where: {
          "house_property_id": data.property,
          "house_number_id": data.house_number_id
        }
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
          curr: 1 //设定初始在第 5 页
        }        
      }); //只重载数据
      return false;
    });

    // 编辑、删除事件
    table.on('tool(grid)', function (obj) {
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      switch (layEvent) {
        case 'edit':// 编辑
          xadmin.open('编辑用户', 'edit.html?id=' + data.id + '&house_property_id=' + data.house_property_id, '', '', true);
          break;
        case 'del':
          layer.confirm('确认要删除吗？', function () {
            main.ajaxPost(
              {
                url: "{:url('delete')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('dataGrid'); //只重载数据
              }
            )
          });
          break;
      };
    });

    //表头工具栏事件
    table.on('toolbar(grid)', function (obj) {
      switch (obj.event) {
        case 'add':
          var formData = form.val("formData");
          xadmin.open('新增租客', 'edit.html?house_property_id=' + formData.property, '', '', true);
          break;
      };
    });

    // 房产房号 下拉联动
    form.on('select(select)', function (data) {
      var house_property_id = data.value;
      $.ajax({
        type: 'GET',
        url: "{:url('House.number/queryNumberId')}",
        data: { house_property_id: house_property_id },
        dataType: 'json',
        success: function (e) {
          //empty() 方法从被选元素移除所有内容
          $("select[name='house_number_id']").empty();
          var html = "<option value=''>请选择房号</option>";
          $(e.data).each(function (v, k) {
            html += "<option value='" + k.id + "'>" + k.name + "</option>";
          });
          //把遍历的数据放到select表里面
          $("select[name='house_number_id']").append(html);
          // //从新刷新了一下下拉框
          form.render('select');      //重新渲染
        }
      });
    });
  });

</script>